import React, { Component, Fragment } from 'react'
import {CSSTransition,TransitionGroup} from 'react-transition-group'
import './style.css'

export default class App extends Component {

    constructor(props){
        super(props)
        this.state = {
            list: []
        }
        this.handleAddItem = this.handleAddItem.bind(this)
    }

    render() {
        return (
            <Fragment>
                <TransitionGroup>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <CSSTransition  timeout={1000} classNames="fade"
                                // 隐藏时 卸载当前dom
                                unmountOnExit
                                // 动画结束的钩子函数
                                onEntered={el=>el.style.color="blue"}
                                // 第一次加载也有动画
                                appear={true}  key={item}  > 
                                   <div >{item}</div>
                                </CSSTransition> 
                            ) 
                        })
                    }
                </TransitionGroup>
                 
                <button onClick = {this.handleAddItem}>toggle</button>
            </Fragment> 
        )
    }

    handleAddItem(){
       this.setState(prevState =>({
           list: [...prevState.list,'item-' + (prevState.list.length + 1)]
       }))
    }

}
